<template>
  <div class="main ad-manage-list">
    <section>
      <search-form
        :listQuery="listQuery"
        :queryConfig="queryConfig"
        :labelWidth="100"
        :search="search"
      />
      <el-table
        :data="list"
        v-loading="listLoading"
        element-loading-text="给我一点时间"
        border
        highlight-current-row
      >
        <el-table-column
          align="center"
          label="用户ID"
          prop="userId"
          width="300"
        ></el-table-column>
        <el-table-column
          align="center"
          label="用户昵称"
          prop="nickname"
        ></el-table-column>
        <el-table-column
          align="center"
          label="手机号码"
          prop="mobile"
        ></el-table-column>
        <el-table-column
          align="center"
          label="用户身份"
          prop="role"
        >
          <template slot-scope="scope">
            {{scope.row.role | userRole}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="用户等级"
          prop="subdivisionLevel"
        >
          <template slot-scope="scope">
            {{scope.row.subdivisionLevel | userLevel}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="粉丝数"
          prop="followNum"
        ></el-table-column>
        <el-table-column
          align="center"
          label="真实姓名"
          prop="realName"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="idCardCode"
          label="身份证号"
          width="160"
        ></el-table-column>
        <el-table-column
          align="center"
          label="银行卡号"
          width="160"
          prop="bankCode"
        ></el-table-column>
        <el-table-column
          align="center"
          label="银行卡预留手机号"
          width="160"
          prop="bankPhoneNum"
        ></el-table-column>
        <el-table-column
          align="center"
          label="审核状态"
          width="160"
          prop="status"
        >
          <template slot-scope="scope">
            <span>
              {{scope.row.status|anchorStatus}}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="直推礼包数"
          prop="giftNum"
        ></el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="200"
          v-if="rightsButtons['operate'] || rightsButtons['reason']"
        >
          <template slot-scope="scope">
            <template v-if="rightsButtons['operate']">
              <el-button
                type="success"
                size="mini"
                plain
                v-if="scope.row.status === 1"
                @click="upStatus(scope.row,1)"
              >审核通过</el-button>
              <el-button
                type="danger"
                size="mini"
                plain
                v-if="scope.row.status === 1"
                @click="upStatus(scope.row,0)"
              >审核拒绝</el-button>
            </template>

            <el-button
              type="danger"
              size="mini"
              plain
              v-if="rightsButtons['reason'] && scope.row.status === 3"
              @click="lookReject(scope.row.approveReason)"
            >查看拒绝原因</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal"
      ></el-pagination>
    </section>
    
    <el-dialog
      title="拒绝原因"
      :visible.sync="rejectDialog"
      width="30%"
    >
      <el-input
        v-model="rejectReason"
        placeholder="请输入拒绝原因"
      ></el-input>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="rejectDialog = false;rejectReason=''">取 消</el-button>
        <el-button
          type="primary"
          @click="_setAnchorReviewReject"
        >确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="拒绝原因"
      :visible.sync="rejectDialog2"
      width="30%"
    >
      <span>{{rejectReason}}</span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="rejectDialog2 = false;rejectReason=''">知 道 了</el-button>
      </span>
    </el-dialog>
    <el-dialog title="设置" :visible.sync="dialogSetType" width="30%">
      <el-form label-width="100px" >
        <el-form-item label="身份：">
          <el-radio-group v-model="type">
            <el-radio :label="1">平台主播</el-radio>
            <el-radio :label="2">代理主播</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogSetType = false">取 消</el-button>
        <el-button type="primary" @click="handleSetAnchor">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SearchForm from '@/components/searchForm'
import anchorMixin from './mixin'
import {
  getAnchorReviewQuery,
  setAnchorReivewPass,
  setAnchorReviewReject
} from '@/api/bizhibo'
export default {
  name: 'bzb-anchormanage',
  mixins: [anchorMixin],
  components: {
    SearchForm
  },
  data() {
    return {
      list: [],
      currentId: '', // 当前操作id
      rejectReason: '', // 审核拒因
      listLoading: false,
      rejectDialog: false,
      rejectDialog2: false,
      listTotal: 0,
      listQuery: {
        liveUserId: '',
        idCardCode: '',
        mobile: '',
        nickname: '',
        realName: '',
        status: '',
        userIdentity: [],
        pageNo: 1,
        pageSize: 10
      },
      queryConfig: [
        {
          prop: 'liveUserId',
          type: 'input',
          label: '用户ID',
          maxlength: '100'
        },
        {
          prop: 'nickname',
          type: 'input',
          label: '用户昵称'
        },
        {
          prop: 'mobile',
          type: 'input',
          label: '手机号码'
        },
        {
          prop: 'userIdentity',
          type: 'cascader',
          label: '用户身份',
          data: [
            {
              value: '0',
              label: '普通用户',
              children: [
                {
                  value: 1,
                  label: 'LV1'
                }
              ]
            },
            {
              value: 2,
              label: '大区',
              children: [
                {
                  value: 1,
                  label: 'LV1'
                },
                {
                  value: 2,
                  label: 'LV2'
                },
                {
                  value: 3,
                  label: 'LV3'
                },
                {
                  value: 4,
                  label: 'LV4'
                },
                {
                  value: 5,
                  label: 'LV5'
                },
                {
                  value: 6,
                  label: 'LV6'
                },
                {
                  value: 7,
                  label: 'LV7'
                },
                {
                  value: 8,
                  label: 'LV8'
                },
                {
                  value: 9,
                  label: 'LV9'
                }
              ]
            },
            {
              value: 3,
              label: '董事',
              children: [
                {
                  value: 1,
                  label: 'LV1'
                },
                {
                  value: 2,
                  label: 'LV2'
                },
                {
                  value: 3,
                  label: 'LV3'
                },
                {
                  value: 4,
                  label: 'LV4'
                },
                {
                  value: 5,
                  label: 'LV5'
                },
                {
                  value: 6,
                  label: 'LV6'
                },
                {
                  value: 7,
                  label: 'LV7'
                },
                {
                  value: 8,
                  label: 'LV8'
                }
              ]
            }
          ]
        },
        {
          prop: 'realName',
          type: 'input',
          label: '真实姓名'
        },
        {
          prop: 'idCardCode',
          type: 'input',
          label: '身份证号'
        }
      ],
      dialogSetType: false,
      type: 1
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      try {
        const params = {
          ...this.listQuery,
          role: this.listQuery.userIdentity[0],
          subdivisionLevel: this.listQuery.userIdentity[1]
        }
        delete params.userIdentity
        const { data } = await getAnchorReviewQuery(params)
        this.list = data.records
        this.listTotal = data.total
      } catch (error) {
        console.log(error)
      }
    },
    upStatus(val, status) {
      this.currentId = val.userId
      if (status === 0) {
        this.rejectDialog = true
      } else {
        this.dialogSetType = true
        this.anchorInfo = val
      }
    },
    async _setAnchorReviewReject() {
      try {
        const data = await setAnchorReviewReject(this.currentId, {
          reason: this.rejectReason
        })
        if (data.msg === 'SUCCESS') {
          this.$message.success('操作成功')
          this.rejectDialog = false
          this.rejectReason = ''
          this.getList()
        } else {
          this.$message.error('操作失败')
        }
      } catch (error) {
        console.log(error)
        this.$message.error('操作失败')
      }
    },
    lookReject(val) {
      this.rejectReason = val
      this.rejectDialog2 = true
    },
    // 搜索
    search() {
      this.listQuery.pageNo = 1
      this.getList()
    },
    // 切换分页
    handleCurrentChange(page) {
      this.listQuery.pageNo = page
      this.getList()
    },
    // 切换分页数
    handleSizeChange(pageSize) {
      this.listQuery.pageSize = pageSize
      this.getList()
    },
    // 设置主播身份弹窗
    handleSetAnchor(){
      setAnchorReivewPass({
        type: this.type,
        id: this.anchorInfo.userId
      }).then(res => {
        if (res.code === 200) {
          // const index = this.list.findIndex(i => i.userId === this.anchorInfo.userId)
          // this.list[index].type = this.type
          this.anchorInfo = {}
          this.dialogSetType = false
          this.getList()
        }
      }).catch(err => {
        console.log(err)
        this.$message.error('操作失败')
      })

    }
  }
}
</script>

<style></style>
